.home {
  width : 1277px;
  margin: auto;

}

.home_title_nav {
  height     : 75px;
  width      : 100%;
  background : rgb(236, 65, 65);
  display    : flex;
  align-items: center;

  //  导航栏左边  logo 标题  搜索位置
  .nav_left {
    width          : 50%;
    height         : 100%;
    display        : flex;
    padding        : 0 25px;
    align-items    : center;
    box-sizing     : border-box;
    justify-content: space-between;

    // logo 标题
    .nav_left_sm_box {
      display    : flex;
      align-items: center;

      .logo {
        margin-right: 10px;
        padding-top : 5px;

        img {
          width : 100%;
          height: 100%;
        }
      }

      .name {
        font-size: 23px;
        color    : #fff;

      }
    }

    //  左右按钮  搜索位置  听歌识曲 
    .nav_left_ipt {
      display       : flex;
      // align-items: center;

      // 左边的左右按钮
      .nav_left_icon {
        display        : flex;
        align-items    : center;
        justify-content: center;
        margin-right   : 10px;

        .icon_left {
          margin-right: 10px;
        }

        div {
          cursor         : pointer;
          width          : 35px;
          height         : 35px;
          background     : rgb(225, 62, 62);
          border-radius  : 50%;
          display        : flex;
          justify-content: center;
          align-items    : center;

          .el-icon-arrow-left,
          .el-icon-arrow-right {
            color: #ccc;

            &:hover {
              color: #fff;
            }
          }
        }
      }

      // 搜索框
      .search {
        margin-right: 10px;
        position    : relative;

        .tc {
          z-index         : 10000;
          background-color: #fff;
          width           : 450px;
          height          : 566px;
          position        : absolute;
          top             : 40px;
          border-radius   : 5px;
          left            : -70px;
          box-sizing      : border-box;
          overflow-y      : auto;

          .tc_box {
            padding-top: 20px;
            width      : 100%;
            box-sizing : border-box;

            .tc_title_box {
              display        : flex;
              justify-content: space-between;
              padding        : 0 20px;

              .history_delete {
                font-size: 20px;


                span {
                  display     : inline-block;
                  margin-right: 15px;
                  color       : #777;
                  user-select : none
                }

                .el-icon-delete {
                  margin: 0;
                  cursor: pointer;

                  &:hover {
                    color: black;
                  }
                }
              }

              .look_all {
                color       : #777;
                // font-size: 12px;
                cursor      : pointer;
                user-select : none;

                &:hover {
                  color: black;
                }
              }
            }

            .search_history {
              max-width    : 100%;
              margin-top   : 10px;
              margin-bottom: 20px;
              // height:70px;
              overflow     : hidden;

              div {
                margin       : 0 5px;
                display      : inline-block;
                padding      : 5px 20px;
                border       : 1px solid #ccc;
                border-radius: 20px;
                max-width    : 96%;
                overflow     : hidden;
                text-overflow: ellipsis;
                white-space  : nowrap;
                cursor       : pointer;
                box-sizing   : border-box;
                position     : relative;

                &:hover {
                  background-color: #f0f0f0;
                }

                &:hover .search_history_delete {
                  display: block;
                }

                .search_history_delete {
                  display    : inline-block;
                  position   : absolute;
                  top        : calc(50% - 16px);
                  font-size  : 14px;
                  line-height: 33px;
                  color      : #666;
                  right      : 10px;
                  display    : none;
                }
              }
            }

            .hot_search_top_box {

              .hot_search_top {
                font-size: 20px;
                color    : #777;
                padding  : 0 20px;
              }

              .hot_search_top_content {
                padding-top: 15px;

                .hot_search_top_item {
                  // background-color: brown;
                  display   : flex;
                  padding   : 10px 0px;
                  box-sizing: border-box;
                  cursor    : pointer;

                  &:hover {
                    background-color: #f0f0f0;
                  }

                  .index {
                    width              : 60px;
                    height             : 60px;
                    line-height        : 60px;
                    text-align         : center;
                    // background-color: blue;
                    font-size          : 18px;
                    color              : #ccc;
                  }

                  .index_top_three {
                    font-weight: bold;
                    color      : #e4393c;
                  }

                  .name_count_desc {
                    .name_count {
                      margin-bottom: 10px;
                      display      : flex;
                      align-items  : center;

                      span {
                        display: inline-block;
                      }

                      .name {
                        font-weight : bold;
                        margin-right: 10px;
                      }

                      .img_top_icon {
                        width       : 13px;
                        height      : 15px;
                        margin-right: 5px;

                        img {
                          width : 100%;
                          height: 100%;
                        }
                      }

                      .img_hot_icon {
                        width       : 30px;
                        height      : 15px;
                        margin-right: 5px;

                        img {
                          width : 100%;
                          height: 100%;
                        }
                      }

                      .count {
                        color: #ccc;
                      }
                    }

                    .desc {
                      color: #777;
                    }
                  }

                }
              }
            }
          }

          .tc_box2 {
            .tc_box2_title {
              padding: 10px;
              color  : 12px;
              color  : #777;
              cursor : pointer;

              &:hover {
                color: black;
              }

            }

            .song_title {
              display    : flex;
              align-items: center;
              background : #f0f0f0;

              .img {
                width : 15px;
                margin: 5px 10px;

                img {
                  width: 100%;
                }
              }
            }

            .song_item,
            .singer_item,
            .zj_itme {
              padding     : 8px 0;
              padding-left: 35px;
              cursor      : pointer;

              .alias {
                color: #777;
              }

              &:hover {
                background: #f0f0f0;
              }
            }

            .singer_title,
            .zj_title {
              display    : flex;
              align-items: center;
              background : #f0f0f0;

              .img {
                width      : 20px;
                margin     : 5px 10px;
                display    : flex;
                align-items: center;

                img {
                  width: 100%;
                }
              }
            }
          }
        }
      }

      input {
        height       : 100%;
        width        : 100%;
        outline      : none;
        border       : none;
        border-radius: 30px;
        padding-left : 24px;
        box-sizing   : border-box;
        background   : rgb(225, 62, 62);
        color        : #fff;
        // opacity: .7;
      }

      input::-webkit-input-placeholder {
        color: #ccc;
      }
    }

    // 听歌识曲
    .listen_to_music {
      width          : 40px;
      height         : 40px;
      border-radius  : 50%;
      display        : flex;
      justify-content: center;
      align-items    : center;
      cursor         : pointer;
      background     : rgb(225, 62, 62);

      img {
        width: 50%;
      }
    }
  }

}

.nav_right {
  background-color: pink;
}

// 中间内容区
.center_content {
  display: flex;
  height : 680px;

  .center_left {
    width     : 250px;
    background: #fff;
    padding   : 10px 5px 10px 10px;

    .left_nav {
      height          : 40px;
      background-color: #fff;
      margin-bottom   : 10px;
      line-height     : 40px;
      font-size       : 20px;
      color           : #333;
      cursor          : pointer;
    }

    .left_nav_title {
      color      : #666;
      user-select: none;
    }
  }

  .center_right {
    flex            : 1 0 80%;
    background-color: #fff;
    border-left     : 1px solid #ccc;
    padding         : 10px 0 10px 20px;
    box-sizing      : border-box;
  }
}

.active {
  background : #ccc !important;
  color      : black;
  font-weight: bold;
}

.left_nav_title {
  margin-bottom: 10px;
}

// 创建歌单
.my_create {
  .left_nav_create {
    display        : flex;
    justify-content: space-between;

    .create_show {
      cursor: pointer;
    }

    .add_ipt {
      font-size  : 20px;
      cursor     : pointer;
      user-select: none;
    }
  }
}

// 底部播放器位置
.player {
  border-top     : 1px solid #ccc;
  background     : #fff;
  width          : 100%;
  height         : 90px;
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : 0 20px;
  box-sizing     : border-box;

  .music_info {
    align-items  : center;
    // background: turquoise;
    display      : flex;
    width        : 250px;

    .img {
      width     : 60px;
      height    : 60px;
      background: #ccc;
      cursor    : pointer;
      position  : relative;

      img {
        width : 60px;
        height: 60px;
      }

      .icon {
        background-color: rgba(30, 30, 30, .6);
        position        : absolute;
        top             : 0;
        left            : 0;
        width           : 100%;
        height          : 100%;
        color           : #fff;
        font-size       : 40px;
        text-align      : center;
        line-height     : 60px;
        opacity         : 0;
      }

      &:hover .icon {
        opacity: 1;
      }
    }

    .name_collection_author {
      max-width  : 200px;
      margin-left: 10px;

      .name_collection {
        display: flex;

        .collection {
          height: 30px;
          width : 30px;

          img {
            height: 30px;
            cursor: pointer;
            width : 30px;
          }
        }

        .name {
          color        : #333;
          margin-right : 10px;
          line-height  : 30px;
          cursor       : pointer;
          font-size    : 18px;
          text-overflow: ellipsis;
          overflow     : hidden;
          white-space  : nowrap;

          .alias {
            color: #888;
          }
        }
      }

      .author {
        color        : #333;
        overflow     : hidden;
        white-space  : nowrap;
        cursor       : pointer;
        text-overflow: ellipsis;
      }
    }
  }

  // 播放器位置
  .center_player {
    .btn {
      display        : flex;
      align-items    : center;
      justify-content: center;
      height         : 50px;

      .left_btn {
        height          : 30px;
        width           : 30px;
        background-size : cover;
        background-image: url("../images/on.png");
      }

      .left_btn:hover {
        background-image: url("../images/on_active1.png");
      }

      .center_btn {
        margin: 0 15px;
      }

      .center_btn:hover {
        color: #e4393c;
      }

      .right_btn {
        height          : 30px;
        width           : 30px;
        background-size : cover;
        background-image: url("../images/next.png");
      }

      .right_btn:hover {
        background-image: url("../images/next_active.png");
      }

      // .left_btn,
      // .right_btn {
      //   display: flex;
      //   align-items: center;
      //   justify-content: center;
      // }

      div {
        width      : 50px;
        font-size  : 50px;
        line-height: 50px;
        cursor     : pointer;
      }
    }

    .progres_time {
      display    : flex;
      align-items: center;
    }

    /deep/.progres .el-slider__runway {
      width : 500px !important;
      margin: 0 10px;
    }
  }

  .sound_box {
    display       : flex;
    align-items   : center;
    // margin-left: auto;
  }

  // 音量图标
  .sound {
    height         : 36px;
    width          : 36px;
    background-size: cover;

    img {
      width : 35px;
      height: 35px;
    }
  }

  // 设置滑块组件的小手
  /deep/ .el-slider__button.hover,
  .el-slider__button:hover {
    cursor: pointer !important;
  }

  /deep/ .el-slider__button-wrapper.hover,
  .el-slider__button-wrapper:hover {
    cursor: pointer !important;
  }

  // 设置滑块组件的滑块显示影藏
  /deep/.el-slider__button-wrapper {
    opacity: 0;
  }

  /deep/.el-slider__runway:hover .el-slider__button-wrapper {
    opacity: 1;
  }

  // 这是滑块组件的大小和颜色
  /deep/.el-slider__button {
    background: #e4393c;
    width     : 10px;
    height    : 10px;
    border    : none;
  }

  // 设置进度条的粗细
  /deep/ .el-slider__runway {
    height: 4px;
  }

  /deep/ .el-slider__runway:hover {
    height: 6px;
  }

  /deep/ .el-slider__runway:hover .el-slider__bar {
    height: 6px;
  }

  /deep/ .el-slider__bar {
    height          : 4px;
    background-color: #e4393c;
  }

  .block {
    width: 100px;
  }
}

.play_list {
  position: relative;

  .play_list_img {
    width      : 30px;
    height     : 30px;
    margin-left: 10px;
    cursor     : pointer;
  }

  .lists {
    position        : absolute;
    top             : -711px;
    left            : -440px;
    height          : 680px;
    width           : 500px;
    z-index         : 10000;
    overflow-y      : auto;
    background-color: rgba(255, 255, 255, .9);

    .play_history {
      text-align      : center;
      font-size       : 20px;
      font-weight     : bold;
      padding         : 10px 0;
      background-color: #fff;
      line-height     : 40px;
    }

    .title {
      width          : 100%;
      height         : 40px;
      border-bottom  : 1px solid #ccc;
      display        : flex;
      justify-content: space-between;
      align-items    : center;
      padding        : 0 20px;
      box-sizing     : border-box;

      .list_count {
        color: #999;
      }

      .delete_box {
        display: flex;
        cursor : pointer;

        .delete_img {
          width : 20px;
          height: 20px;

          img {
            height: 20px;
            width : 20px;
          }
        }
      }
    }

    .list {
      width          : 100%;
      height         : 30px;
      background     : #fff;
      margin-bottom  : 5px;
      display        : flex;
      justify-content: space-between;
      padding        : 0 10px;
      box-sizing     : border-box;
      align-items    : center;
      cursor         : default;

      div {
        padding      : 5px 0;
        overflow     : hidden;
        white-space  : nowrap;
        text-overflow: ellipsis;
        margin-left  : 10px;
      }

      .music_name {
        flex: 0 0 53%;

        .alias {
          color: #999;
        }
      }

      .music_man_name {
        flex: 0 0 20%;
      }

      .music_time {
        flex : 0 0 12%;
        color: #999;
      }

      .music_delete {
        width : 20px;
        height: 20px;
        cursor: pointer;

        img {
          width : 100%;
          height: 100%;
        }
      }

      &.active {
        color      : #e4393c;
        font-weight: normal;
      }
    }

  }
}


//  音乐播放器位置  当真正的播放器隐藏时显示
.pleyer_show {
  width     : 100%;
  height    : 90px;
  background: #fff;

}

// 修改浏览器滚动条样式
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  border-radius: 10px;
  background   : #ccc;
}

::-webkit-scrollbar-thumb {
  border-radius     : 10px;
  // -webkit-box-shadow: inset 0 0 6px #ccc;
  background        : #666;
}

/* 动画效果 */
.slide-right-enter-active,
.slide-right-leave-active,
.slide-com-enter-active,
.slide-com-leave-active,
.slide-back-enter-active,
.slide-back-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 500ms;
  position: absolute;
}

.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 100%, 0);
}

.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 100%, 0);
}

.slide-left-enter {
  opacity: 0;
  transform: translate3d(-100%, 100%, 0);
}

.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 100%, 0);
}

.slide-com-enter {
  opacity: 0;
  transform: translate3d(0, -100%, 0);
}

.slide-com-leave-active {
  opacity: 0;
  transform: translate3d(0, 100%, 0);
}

.slide-back-enter {
  opacity: 0;
  transform: translate3d(0, 100%, 0);
}

.slide-back-leave-active {
  opacity: 0;
  transform: translate3d(0, -100%, 0);
}


